<template>
  <div class="ip-container">
    <el-input :value="value" @blur="closePannel"  @focus="openPannel" class="ip-input"></el-input>
    <transition>
      <div v-if="open"  class="ip-card el-card is-always-shadow">
            <div @click="()=>changeValue(icon)" class="ip-block"   :class="hasSelected(icon)?'ip-selected':''" v-for="icon in icons" :key="icon">
                <div>
                    <div :class="'iconfont icon-'+icon"></div>
                </div>
            </div>
            <div v-for="o in 6" :key="o" style="width:60px;"></div>
      </div>
    </transition>
  </div>
</template>
<script>
export default {
    name: 'v-icon-pannel',
    props: {
        value: { // 已选中的图标
            type: String,
            default: ''
        },
        icons: { // 图标列表（字体图标css 去掉前面的icon-前缀）
            type: Array,
            default: () => {
                return ['workspace', 'user-manager', 'system-manager', 'role-manager', 'plugin-manager',
        'plugin-kind', 'org-manager', 'menu-manager', 'gplot-manager', 'bigdata-config', 'attribute']
            }
        }
    },
  data () {
    return {
        open: false
    }
  },
  methods: {
      closePannel () {
          this.open = false
      },
      hasSelected (item) {
          return item === this.value
      },
      openPannel () {
          this.open = true
      },
      changeValue (value) {
          this.$emit('input', value)
      }
  }
}
</script>
<style  lang="stylus" rel="stylesheet/stylus">
.ip-container
  position relative
  z-index 1
  .ip-input
    width 100%
  .ip-card
    position absolute
    width 100%
    max-height 400px
    padding 8px
    display flex
    justify-content space-around
    flex-direction row
    flex-wrap wrap
    .ip-block
        &:hover
            background-color  #cdcdcd
            cursor pointer
        text-align center
        width 60px
        height 60px
        display flex
        flex-direction column
        justify-content space-around
        .ip-title
            display inline-block
            width 100%
            font-size 10px
            color #999
            overflow hidden
            text-overflow ellipsis
            white-space nowrap
    .ip-selected
        background-color #ededed
</style>
